<!--分页组件-->
<template>
  <a-pagination style="text-align:center;"
                :pageSize="defaultPageSize"
                :total="paging.total"
                :current="currentPage"
                :showSizeChanger="showSizeChanger"
                :showQuickJumper="true"
                :pageSizeOptions="this.$constantConfig.pageSizeOptions"
                :show-total="(total,range)=>{return $t('site.page',[currentPage,Math.ceil(total/defaultPageSize)])}"
                @change="change"
                @showSizeChange="showSizeChange"
  />
</template>

<script>
export default {
  data() {
    return {
      defaultPageSize: 0,
    };
  },
  props: {
    paging: {required: true},
    currentPage: {required: true},
    pageSize: {default: 20},
    showSizeChanger: {default: true},
  },
  watch: {
    pageSize(value) {
      this.defaultPageSize = value;
    }
  },
  methods: {
    change(page, pageSize) {
      this.$emit('onChange', {current: page, pageSize: pageSize});
    },
    showSizeChange(page, pageSize) {
      this.$emit('onChange', {current: page, pageSize: pageSize});
    }
  },
  mounted() {
    // 默认每页展示条数和传入每页展示条数做兼容处理
    if (this.pageSize === 0) {
      this.defaultPageSize = parseInt(this.$constantConfig.pageSizeOptions[0]);
    } else {
      this.defaultPageSize = parseInt(this.pageSize);
    }
  },
}
</script>